<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
  >
    <navbar :title="$t('info')" :back="true" navbarBg="#FFF" bgLayer="none" />
 
    <view class="tab" style="position: sticky; z-index: 999" :style="{ top: headerArea.title_height + headerArea.menuTop + 'px' }">
      <u-grid :border="false" @click="clickGrid" col="3">
        <u-grid-item
          v-for="(baseListItem, baseListIndex) in baseList"
          :key="baseListIndex"
        >
          <u--image
            :showLoading="true"
            :src="baseListItem.src"
            width="80rpx"
            height="80rpx"
          ></u--image>

          <text class="grid-text">{{
            $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
          }}</text>
        </u-grid-item>
      </u-grid>
    </view>


    <view class="main">
      <view style="padding-bottom: 130rpx; min-height: 1200rpx">
        <view class="d-flex flex-wrap items-center justify-center" >
          <house-row
            v-for="(item, i) in dataList.data"
            :item="item"
            :key="i"
            @click="toDetail(item)"
          />
        </view>
        <u-empty
          v-if="
            dataList &&
            dataList.data.length == 0 &&
            dataList.loadmoreStatus != 'loading'
          "
          mode="list"
          icon="/static/images/empty.png"
          :text="$t('no_content')"
          style="padding-top: 250rpx"
        />
        <u-loadmore
          v-else
          :status="dataList.loadmoreStatus"
          :loading-text="$t('loadingText')"
          loadmore-text="."
          nomoreText="."
          :isDot="true"
          :line="dataList.loadmoreStatus == 'nomore'"
          color="#bfbfbf"
        />
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      baseList: [
        {
          src: "/static/images/grid/店铺转让.png",
          titleCn: "店铺转让",
          title: "دۇكان ئۆتكۈزۈش",
          id: 1,
        },
        {
          src: "/static/images/grid/店铺出租.png",
          titleCn: "店铺出租",
          title: "ئىجارە دۇكان",
          id: 2,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 3,
        },
      ],
      dataList: {
        current_page: 1,
        data: [],
        last_page: 1,
        loadmoreStatus: "loadmore",
      },
      scrollTop: 0
    };
  },
  onLoad() {     this._indexPage()},
  onShow() {},
  async onPullDownRefresh() {
    await this._index();
    this.dataList.current_page = 1;
    await this._indexPage();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {},
  async onReachBottom() {
    if (
      this.dataList.current_page <
      this.dataList.last_page
    ) {
      this.dataList.current_page += 1;
      await this._indexPage();
    }
  },
  onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
  methods: {
    clickGrid(e) {
      console.log('exc',e)
          uni.navigateTo({
            url: "/detailList/pages/dukanDetail?id="+ (e+1) ,
          });
    },
    async _indexPage() {
      this.dataList.loadmoreStatus = "loading";
      let page = this.dataList.current_page;
      let params = {
        page: page,
        pageSize: 10,
        _id: 1,
      };
      await this.$uniapi("/get_info_list", params)
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;
           
            if (page == 1){
              this.dataList.data = uqur.data;
              console.log('uqur',uqur.data)
            } 
          
            else this.dataList.data.push(...uqur.data);
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
  },
  computed: {
        headerArea() {
            let area = uni.getSystemInfoSync()
            // #ifdef MP-WEIXIN
            let menu = uni.getMenuButtonBoundingClientRect()

            console.log('area:', area)
            console.log('menu:', menu)

            return {
                status_height: area.statusBarHeight,
                title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                menuLeft: menu.left,
                menuTop: menu.top - (menu.top - area.statusBarHeight),
            }
            // #endif
            // #ifndef MP-WEIXIN
            return {
                status_height: area.statusBarHeight,
                title_height: uni.upx2px(82),
                menuLeft: 0,
                menuTop: uni.upx2px(88),
            }
            // #endif
        },
    },
};
</script>
<style lang="scss">
.tab {
  padding: 10rpx;
  width: 95vw;
  background: #fff;
  border-radius: 25rpx;
  margin: 10rpx ;
  box-shadow: 0px 0px 20px 1px #cccccc47;
}
.grid-text {
  font-size: 14px;
  color: #000;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
</style>